<template>
 <div>
    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" label-position="right">
        <el-row>
          <el-col :span="8">
            <el-form-item label="店铺ID/名称">
              <el-input v-model="formInline.user" placeholder="店铺ID/名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户ID/昵称">
              <el-input v-model="formInline.username" placeholder="用户ID/昵称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态">
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="已提现" value="已提现"></el-option>
                <el-option label="待处理" value="待处理"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="提现单号">
              <el-input v-model="formInline.oddNumbers" placeholder="提现单号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="block">
              <span class="demonstration">申请提现日期</span>
              <el-date-picker
                v-model="value1"
                @change="onChange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
  </el-card>
  <div></div>
  <el-table :data="tableData" style="width: 100%" class="marginTop" border>
    <el-table-column prop="transaction" label="交易类型"></el-table-column>
    <el-table-column prop="shopId" label="店铺ID/用户ID"></el-table-column>
    <el-table-column prop="username" label="店铺名称/昵称"></el-table-column>
    <el-table-column prop="withdrawalId" label="提现单号"></el-table-column>
    <el-table-column prop="amout" label="提现金额"></el-table-column>
    <el-table-column prop="starttime" label="申请提现时间"></el-table-column>
    <el-table-column prop="state" label="状态"></el-table-column>
    <el-table-column prop="time" label="提现时间"></el-table-column>
    <el-table-column prop="remarks" label="提现备注"></el-table-column>
    <el-table-column prop="" label="操作" @click="handle">
      <template slot-scope="scope">
        <el-link type="primary" @click="handle(scope.row.username, scope.$index)">处理</el-link>
      </template>
    </el-table-column>
  </el-table>
 </div>
</template>

<script>
import { getItem, setItem } from '@/utils/storage.js'
export default {
  data () {
    return {
      formInline: {
        user: '',
        username: '',
        region: '',
        oddNumbers: ''
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value1: '',
      value2: '',
      tableData: [] // 表格数据
    }
  },
  created () {
    this.getWithdrawList()
  },
  methods: {
    async getWithdrawList () {
      if (getItem('WITHDRAW')) {
        this.tableData = getItem('WITHDRAW')
      }
      const { data } = await this.$http.get('/withdrawal')
      this.tableData = data.list
      // console.log(this.tableData)
      setItem('WITHDRAW', this.tableData)
    },
    onSubmit () {
      this.tableData = getItem('WITHDRAW')
      if (this.formInline.user === '' && this.formInline.oddNumbers === '' && this.formInline.region === '' && this.value1 === '' && this.formInline.username === '') {
        return this.$message.error('至少输入一条内容！')
      }
      const qureyresult = this.tableData.filter(item => {
        return this.formInline.user.trim() === item.shopId || this.formInline.oddNumbers === item.order || this.formInline.region === item.transaction || this.formInline.username === item.username
      })
      // console.log(qureyresult)
      this.tableData = qureyresult
    },
    reset () {
      this.formInline.user = ''
      this.formInline.username = ''
      this.formInline.oddNumbers = ''
      this.formInline.region = ''
      this.tableData = getItem('WITHDRAW')
    },
    handle (name, index) {
      console.log(111)
      this.$prompt(`确认用户/商户“${name}”提现申请已打款，备注输入：`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        console.log(value)
        this.tableData[index].remarks = value
        this.tableData[index].state = '已提现'
        this.$message({
          type: 'success',
          message: '已处理'
        })
        setItem('WITHDRAW', this.tableData)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消操作'
        })
      })
    },
    onChange () {
      console.log('change')
    }
  }
}
</script>

<style lang="less">
.block {
  display: inline-block;
}
.one {
  margin: 20px 0;
  span {
    margin-right: 20px;
  }
}
.marginTop {
  margin-top: 20px;
}
</style>
